<!--  -->
<template>
  <div class="form-list-data-table">
    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column prop="filename" label="备份名称">
      </el-table-column>
      <el-table-column prop="description" label="备份描述">
      </el-table-column>
      <el-table-column prop="createAt" label="备份时间" width="180">
        <template slot-scope="scope">
          {{scope.row.createAt | dateformat('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column prop="size" label="文件大小" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.size | showSize}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0">未开始</span>
          <span v-else-if="scope.row.status === 1" style="color:#67C23A;">成功</span>
          <span v-else-if="scope.row.status === 2" style="color:#E6A23C;">执行中</span>
          <div v-else-if="scope.row.status === 3" style="color:#E10015;">异常失败 <el-tooltip class="qstip" effect="dark" :content="scope.row.backupErrmsg" placement="right">
            <i class="el-icon-info"></i>
          </el-tooltip></div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button @click="restoreData(scope.row.id, scope.row.filename)" type="text" size="small" v-if="scope.row.status === 1">还原备份</el-button>
          <el-button @click="deleteData(scope.row.id, scope.row.filename)" type="text" size="small" v-if="scope.row.status === 1 || scope.row.status === 3">删除备份</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import * as PubsubType from '@/config/pubsubtype.js'
export default {
  props: {
    loading: {
      type: Boolean
    },
    tableData: {
      type: Array
    },
    initData: {
      type: Function
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  filters: {
    showSize: function (value) {
      if (value < 1024) {
        return value + 'b'
      } else if (value < 1024 * 1024) {
        return parseFloat(value / 1024).toFixed(1) + 'Kb'
      } else if (value < 1024 * 1024 * 1024) {
        return parseFloat(value / (1024 * 1024)).toFixed(1) + 'Mb'
      } else {
        return parseFloat(value / (1024 * 1024 * 1024)).toFixed(1) + 'Gb'
      }
    }
  },
  methods: {
    restoreData (id, filename) {
      // 还原
      this.$confirm(`<div style="font-size:16px;">是否将数据还原到“ <span style="color:#E10015;">${filename}</span> ”版本?</div> <span style="color:#E10015; font-size:13px;">还原后当前网站数据将被覆盖，不可恢复</span>`, '数据还原', {
        confirmButtonText: '开始还原',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
        customClass: 'copySiteConfirm',
        center: true
      }).then(() => {
        this.$post('/host-backup-restore/restore', {
          id: id
        }).then(response => {
          PubSub.publish(PubsubType.PUBSUB_RESTORE_NOW)
        })
      }).catch(() => {
      })
    },
    deleteData (id, filename) {
      // 删除
      this.$confirm(`<div style="font-size:16px;">是否将备份“ <span style="color:#E10015;">${filename}</span> ”版本删除，确定?</div>`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true,
        customClass: 'copySiteConfirm',
        center: true
      }).then(() => {
        this.$post('/host-backup-restore/delete-backup', {
          id: id
        }).then(response => {
          this.initData()
        })
      }).catch(() => {
      })
    }
  },
  components: {
  }
}

</script>
<style scoped>
.form-list-data-table {
  margin: 12px 0;
}
.form-list-data-table /deep/ .el-table th {
  color: #555;
}
</style>
